<!-- 车辆多天未动 -->
<template>
  <view class="container">
    <!-- header -->
    <FilterNavbar :searchList="searchList" v-model:queryParam="queryParam" @confirm="onFilterNavbarConfirm">
      <template #center>
        <view class="navbar-title"> 车辆多天未动 </view>
      </template>
    </FilterNavbar>
    <!-- tabs -->
    <ve-tabs
      :actived="0"
      :list="tabs"
      @change="tabsChange"
      style="background: #ffffff"
      :showBorder="true"
      :badgeStyle="{ left: 'calc(88% - 105rpx)' }"
    ></ve-tabs>
    <!-- 列表 -->
    <scroll-view
      scroll-y
      :scroll-top="scrollTop"
      :scroll-with-animation="true"
      refresher-enabled
      :refresher-triggered="refreshStatus"
      :enable-back-to-top="true"
      @refresherrefresh="resetRefresh(true)"
      @scrolltolower="reachBottom"
    >
      <view class="record-list">
        <view v-for="record in dataSource" :key="record.id" @click="ondetail(record)">
          <ve-card :title="'车牌号：' + record.licenseNo" type="blue">
            <ve-cell label="ID">{{ record.id }}</ve-cell>
            <ve-cell label="车型">{{ record.modelName }}</ve-cell>
            <ve-cell label="门店">{{ record.siteName }}</ve-cell>
            <ve-cell label="车辆状态">{{ record.status == '0' ? '未处理' : '已处理' || '-' }}</ve-cell>
            <ve-cell label="设备编号">{{ record.vehicleNum }}</ve-cell>
            <ve-cell label="当前位置">{{ record.address }}</ve-cell>
            <ve-cell label="连续未动天数">{{ record.dayNum }}</ve-cell>
            <ve-cell label="提醒时间">{{ record.updateTime }}</ve-cell>
            <template #footer v-if="queryParam.handlerStatus == 0">
              <view class="card-footer">
                <!-- <ve-button type="plain" size="mini" status="gray" @click="ondetail(record)">详情</ve-button> -->
                <ve-button
                  v-if="userStore().v_auth('svmapp:1:operation:movedayshandle')"
                  type="plain"
                  size="mini"
                  @click.stop="onhandle(record)"
                  >处理</ve-button
                >
              </view>
            </template>
          </ve-card>
        </view>
        <!-- 加载结束列表为空时展示 -->
        <ve-empty v-if="dataSource.length == 0 && loadStatus == 'nomore'"></ve-empty>
        <!-- 底部加载状态 -->
        <ve-load-more v-else :status="loadStatus" bgColor="#F7F7F9"></ve-load-more>
      </view>
    </scroll-view>
    <handle v-model="visible" @confirm="handleConfirm"></handle>
  </view>
</template>

<script setup>
  import { ref, onMounted, computed } from 'vue'
  import useList from '@/hooks/useList'
  import FilterNavbar from '@/components/FilterNavbar'
  import handle from './components/handle.vue'
  import { unmoveHandler, unmoveList } from '@/api/dict/operate'
  import { userStore } from '@/stores'
  import { onLoad } from '@dcloudio/uni-app'
  const siteName = ref('')
  onLoad((options) => {
    siteName.value = options.siteName
    queryParam.value.siteId = options.siteId
    searchList.value[0].attrs.params.oldId = options.siteId
    searchList.value[1].attrs.params.siteId = options.siteId
  })
  const visible = ref(false)

  const tabs = ref([
    { label: '待处理', num: 0 },
    { label: '已处理', num: null },
  ])
  const tabsChange = (e) => {
    dataSource.value = []
    queryParam.value.pageNumber = 1
    switch (e) {
      case 0:
        queryParam.value.handlerStatus = 0
        loadData()
        break
      case 1:
        queryParam.value.handlerStatus = 1
        loadData()
        break
    }
  }
  const id = ref(0)
  const onhandle = (record) => {
    visible.value = true
    id.value = record.id
  }
  const ondetail = (record) => {
    uni.setStorageSync('operateAmount', {
      status: queryParam.value.handlerStatus,
      item: record,
    })
    uni.navigateTo({
      url: '/pages/operate/cardaysnomovedetail',
    })
  }
  const handleConfirm = async (val) => {
    const res = await unmoveHandler({ remark: val, id: id.value })
    if (res.code === 200) {
      visible.value = false
      resetRefresh()
      getTool()
    }
  }
  // 查询参数
  const queryParam = ref({
    handlerStatus: 0,
    siteId: undefined,
    carId: undefined,
    pageSize: 30,
  })
  const searchList = computed(() => {
    return [
      {
        prop: 'siteId',
        label: '门店',
        type: 'remote-select',
        attrs: {
          label: siteName.value,
          type: 'sitedataboard',
          params: {
            oldId: queryParam.value.siteId,
          },
          change: (form, labelForm, searchList, val) => {
            if (val) {
              searchList.value[1].attrs.params.siteId = val
              form.value.carId = undefined
              labelForm.value.carId = undefined
            } else {
              searchList.value[1].attrs.params.siteId = undefined
              form.value.carId = undefined
              labelForm.value.carId = undefined
            }
          },
        },
      },
      {
        prop: 'carId',
        label: '车牌号',
        type: 'remote-select',
        attrs: {
          type: 'licenseNo',
          params: {
            siteId: queryParam.value.siteId,
          },
        },
      },
    ]
  })
  const onFilterNavbarConfirm = (params) => {
    queryParam.value = {
      ...queryParam.value,
      ...params,
    }
    resetRefresh()
    getTool()
  }
  const { resetRefresh, reachBottom, loadData, scrollTop, loadStatus, refreshStatus, dataSource } = useList(
    '/V5/warning/carVehicle/unmoveList',
    queryParam,
  )
  const getTool = async () => {
    let params = Object.assign(queryParam.value, { pageNumber: 1, handlerStatus: 0, pageSize: 30 })
    const res1 = await unmoveList(params)
    tabs.value[0].num = res1.result.total || 0
  }
  onMounted(() => {
    getTool()
    loadData()
  })
</script>

<style lang="less" scoped>
  .container {
    height: 100vh;
  }
  .record-list {
    padding: 24rpx;
  }
  .card-footer {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .ve-button + .ve-button {
      margin-left: 24rpx;
    }
  }
</style>
